<%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<body>
<h2>页面成功</h2>
<table>
	<tr>
		<th>编号</th><th>电话</th><th>名称</th>
	</tr>
   <tbody id="J_tableTpl"></tbody>
</table>
<div id="dataList"></div>
<script type="text/x-handlebars-template" id="T_tableTpl">
    {{#each this}}
      <tr>
		<td>{{id}}</td><td>{{mobile}}</td><td>{{username}}</td>
	  </tr>
	{{/each}}
</script>
<script id="table-template" type="text/x-handlebars-template">
      {{#each this}}
         {{#each info}}
           {{../name}}的{{this}}<br>
         {{/each}}
       {{/each}}
</script>
<script type="text/javascript" src="/jquery/1.9.1/jquery.js"></script> 
<script type="text/javascript" src="/handlebars/1.3.0/handlebars.js"></script> 
<script type="text/javascript">
$(function(){
	$.ajax({
        url:"/dataList.do",
        data:{
            id:"3333"//参数
        },
        type:"POST",
        success:function(re){
            console.log(re);
            //var jso = JSON.parse(re);
            var tpl = $("#T_tableTpl").html();
            var template = Handlebars.compile($("#T_tableTpl").html()); 
            
            var html = template(re); 
            $("#J_tableTpl").html(html);
            
        }
    });
	//测试handlebars 双重循环
	var data1 = [{
            	"name":"张三",
            	"info":[
            	   "眼睛",
            	   "耳朵",
            	   "鼻子"
            	]
            },{
            "name":"李四",
            	  "info":[
            	  "爸爸",
            	  "妈妈",
            	  "妻子"
            	]
            }];
    var  myTemplate = Handlebars.compile($("#table-template").html());
    $('#dataList').html(myTemplate(data1));
})

</script>
</body>
</html>
